import React, { useState, useEffect } from 'react'
import { useTranslation } from 'react-i18next';
import { Input, Button } from 'antd';
import ContentList from "../../component/ContentList"
import TitleHead from "../../component/TitleHead"
import { PrismLight as SyntaxHighlighter } from "react-syntax-highlighter";
// @ts-ignore
import { jsx, javascript, sass, scss, bash, less, css } from "react-syntax-highlighter/dist/esm/languages/prism";
<<<<<<< HEAD
import "../../datils.css"
=======
<<<<<<< HEAD
import "../../datils.css"
=======
>>>>>>> wanghengda
>>>>>>> 20de51ee1926e77b985667bbcfd9b29f2f72b409
import axios from 'axios';
import { oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism'
import ReactMarkdown from 'react-markdown'
import MarkNav from 'markdown-navbar';
import { Anchor } from 'antd';
<<<<<<< HEAD
import Bottom from '../../componment/Bottom';
=======
<<<<<<< HEAD
import Bottom from '../../componment/Bottom';
=======
// import Bottom from '../../componment/Bottom';
import ChildQRcode from "../../component/ChildQRcode"
import "../../datils.css"
import "../../scss/Wang.scss"

>>>>>>> wanghengda
>>>>>>> 20de51ee1926e77b985667bbcfd9b29f2f72b409
type Props = {

}


const Datils = (props: Props) => {
    const { t, i18n } = useTranslation();
    const { TextArea } = Input;
    const [to_the_top_flag, setto_the_top_flag] = useState(false)
    let obj = JSON.parse(localStorage.getItem("datils_obj") as string)
    const [list, setlist] = useState([])
    const [h, setH] = useState(0)
<<<<<<< HEAD
=======
<<<<<<< HEAD
=======
    const [wflag, setWflag] = useState(false);
    const OpenDiv = () => {
        wflag ? setWflag(false) : setWflag(true)

    }
    const ShadeFalse=()=>{
        setWflag(false)
    }
>>>>>>> wanghengda
>>>>>>> 20de51ee1926e77b985667bbcfd9b29f2f72b409
    useEffect(() => {
        axios.get("https://bjwz.bwie.com/wipi/api/article/recommend").then(res => {
            setlist(res.data.data)
        })
        SyntaxHighlighter.registerLanguage("jsx", jsx);
        SyntaxHighlighter.registerLanguage("sass", sass);
        SyntaxHighlighter.registerLanguage("scss", scss);
        SyntaxHighlighter.registerLanguage("bash", bash);
        SyntaxHighlighter.registerLanguage("less", less);
        SyntaxHighlighter.registerLanguage("css", css);
        SyntaxHighlighter.registerLanguage("javascript", javascript);
        SyntaxHighlighter.registerLanguage("js", javascript);
    }, [])

    return (
<<<<<<< HEAD
        <div className='wrap' id='top'>
=======
<<<<<<< HEAD
        <div className='wrap' id='top'>
=======
        <div className='wrap'>
            {
                wflag ? <div className='shade'>
                    <div className='W-BackQrcode'>
                        <div className="substance">

                            <div className='w-title-qrcode-head'>
                                <span>Share Poster</span><span onClick={()=>ShadeFalse()} className='hoverhand'>X</span>
                            </div>

                            <div className='w-title-qrcode-main'>
                                <img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c73dd8e449a241e688121cd8aec609c6~tplv-k3u1fbpfcp-zoom-crop-mark:3024:3024:3024:1702.awebp?" alt="" />
                                <h3>vitepress 中文文档 🎉</h3>
                            </div>

                            <div className='w-title-qrcode-footer'>
                                <div className='w-title-qrcode-footer-first-div'>
                                    <ChildQRcode value={'https://www.baidu.com/?tn=49055317_22_hao_pg'}></ChildQRcode>
                                </div>
                                <div className='w-title-qrcode-footer-second-div'>
                                    <div>Scan the QR code to read the article</div>
                                    <div>Original shared from</div>
                                </div>

                            </div>
                            <div className='bottom-esda'>
                                <button className='qrcode-btn hoverhand' onClick={()=>ShadeFalse()}>关闭</button><button className='qrcode-btn qrcode-btn-red hoverhand'>下载</button>
                            </div>

                        </div>

                    </div>
                </div> : ""
            }
>>>>>>> wanghengda
>>>>>>> 20de51ee1926e77b985667bbcfd9b29f2f72b409
            <div className='datils_content' onScroll={() => {
                let img = document.querySelector(".datils_content") as Element
                setH(img.scrollTop)
                console.log(h);
            }}>
                <div className='datils_content_son'>
                    <div className='datils_content_son_left'>
                        <img src={obj.cover} alt="" id='img_to' />
                        <h1 className='datils_title'>{obj.title}</h1>
                        <div className="markdown">
                            <ReactMarkdown children={obj.content} components={{
                                code({ node, inline, className, children, ...props }) {
                                    const match = /language-(\w+)/.exec(className || '')
                                    return !inline && match ? (
                                        <SyntaxHighlighter
                                            children={String(children).replace(/\n$/, '')}
                                            style={oneLight as any}
                                            language={match[1]}
                                            PreTag="div"
                                            {...props}
                                        />
                                    ) : (
                                        <code className={className} {...props}>
                                            {children}
                                        </code>
                                    )
                                }
                            }}></ReactMarkdown>
                        </div>
                        <div className='datils_reply'>
                            <p className='Conmment'>{t("Comment")}</p>
                            <div className='datils_comment_box'>
                                <TextArea rows={7} className="datils_comment_input" />
<<<<<<< HEAD
                                <Button className='datils_button'>{t("send")}</Button>


=======
<<<<<<< HEAD
                                <Button className='datils_button'>{t("send")}</Button>


=======
                                <p className='W-dis-comment'>
                                    <span className='w-sps-footer' id="W-p-pading">
                                        <svg viewBox='0 0 1024 1024 ' width="18px" height="18px">
                                            <path d="M288.92672 400.45568c0 30.80192 24.97024 55.77216 55.77216 55.77216s55.77216-24.97024 55.77216-55.77216c0-30.7968-24.97024-55.76704-55.77216-55.76704s-55.77216 24.97024-55.77216 55.76704z m334.60224 0c0 30.80192 24.97024 55.77216 55.77216 55.77216s55.77216-24.97024 55.77216-55.77216c0-30.7968-24.97024-55.76704-55.77216-55.76704s-55.77216 24.97024-55.77216 55.76704z m-111.5392 362.4704c-78.05952 0-156.13952-39.08096-200.75008-100.3776-16.77312-22.31296-27.84256-50.15552-39.08096-72.45824-5.53472-16.77312 5.5296-33.4592 16.77312-39.08096 16.77312-5.53472 27.84256 5.53472 33.46432 16.768 5.53472 22.30784 16.77312 39.08608 27.84256 55.77728 44.61568 55.76704 100.38272 83.69664 161.664 83.69664 61.30176 0 122.7008-27.84256 156.16-78.07488 11.15136-16.77824 22.30784-38.99904 27.84256-55.77728 5.62176-16.768 22.30784-22.30272 33.4592-16.768 16.768 5.53472 22.30784 22.30272 16.768 33.4592-5.61152 27.84256-22.2976 50.14528-39.08096 72.45824-38.912 61.37856-116.98176 100.3776-195.06176 100.3776z m0 194.51392C268.4928 957.44 66.56 755.52256 66.56 511.99488 66.56 268.48256 268.4928 66.56 511.98976 66.56 755.50208 66.56 957.44 268.48256 957.44 511.99488 957.44 755.52256 755.50208 957.44 511.98976 957.44z m0-831.45728c-213.78048 0-386.00192 172.21632-386.00192 386.01216 0 213.8112 172.22144 386.0224 386.00192 386.0224 213.80096 0 386.0224-172.2112 386.0224-386.0224 0-213.79584-172.22144-386.01216-386.0224-386.01216z" fill="currentColor">

                                            </path>

                                        </svg>
                                        <span>Emoji</span>
                                    </span>
                                    <Button className='datils_button'>{t("send")}</Button>
                                </p>


                                {/* <ChildQRcode value={'http://localhost:3000/home/datils/5aec43a7-c0a9-4246-8189-2e75a1c9065a'}></ChildQRcode> */}
>>>>>>> wanghengda
>>>>>>> 20de51ee1926e77b985667bbcfd9b29f2f72b409
                            </div>
                        </div>
                    </div>
                    <div className='datils_content_son_right'>
                        <div className="datils_right_top">
                            <TitleHead titles={t("Recommended Readings")}></TitleHead>
                            <ContentList Arrs={list}></ContentList>
                            <div className='datils_mulu'>
                                <Anchor>
                                    <div className="markNav-title">{t("Toc")}</div>
                                    <MarkNav
                                        className="article-menu"
                                        source={obj.content}
                                        headingTopOffset={80}
                                    />
                                </Anchor>
                            </div>
                        </div>
                    </div>
                </div>
                <div className='datils_like'>
                    <div className='datils_like_xin'>
                        <svg className='datils_xin' viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="22px" height="22px"><path d="M859.8 191.2c-80.8-84.2-212-84.2-292.8 0L512 248.2l-55-57.2c-81-84.2-212-84.2-292.8 0-91 94.6-91 248.2 0 342.8L512 896l347.8-362C950.8 439.4 950.8 285.8 859.8 191.2z" fill="currentColor"></path></svg>
                    </div>
                    <div className='datils_like_pinl' onClick={() => {
                        document.documentElement.scrollTop = document.body.scrollHeight
                    }}>
                        <svg className='datils_xin' viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="21px" height="21px"><path d="M988.8 512a348.8 348.8 0 0 1-144.96 278.72v208.32l-187.84-131.52a387.2 387.2 0 0 1-56 4.8A408.64 408.64 0 0 1 384 811.84l-36.8-23.04a493.76 493.76 0 0 0 52.8 3.2 493.44 493.44 0 0 0 51.2-2.88c221.44-23.04 394.24-192 394.24-400a365.12 365.12 0 0 0-4.16-51.84 373.44 373.44 0 0 0-48.96-138.56l18.88 11.2A353.6 353.6 0 0 1 988.8 512z m-198.72-128c0-192-169.6-349.76-378.24-349.76h-24C192 47.04 33.92 198.72 33.92 384a334.08 334.08 0 0 0 118.4 253.12v187.52l86.08-60.48 66.24-46.4a396.16 396.16 0 0 0 107.52 16C620.48 734.08 790.08 576 790.08 384z" fill="currentColor"></path></svg>
                    </div>
<<<<<<< HEAD
                    <div className='datils_like_html'>
=======
<<<<<<< HEAD
                    <div className='datils_like_html'>
=======
                    <div className='datils_like_html' onClick={() => OpenDiv()}>
>>>>>>> wanghengda
>>>>>>> 20de51ee1926e77b985667bbcfd9b29f2f72b409
                        <svg className='datils_xin' viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="22px" height="22px"><path d="M753.607 584.7c-48.519 0-91.596 23.298-118.66 59.315l-233.123-116.96c3.684-12.936 5.657-26.591 5.657-40.71 0-15.465-2.369-30.374-6.76-44.391l232.241-116.52c26.916 37.549 70.919 62.017 120.644 62.017 81.926 0 148.34-66.412 148.34-148.34 0-81.926-66.413-148.34-148.34-148.34-81.927 0-148.34 66.413-148.34 148.34 0 5.668 0.33 11.258 0.948 16.762l-244.945 122.892c-26.598-25.259-62.553-40.762-102.129-40.762-81.926 0-148.34 66.412-148.34 148.34s66.413 148.34 148.34 148.34c41.018 0 78.144-16.648 104.997-43.555l242.509 121.668c-0.904 6.621-1.382 13.374-1.382 20.242 0 81.927 66.412 148.34 148.34 148.34s148.34-66.413 148.34-148.34c-0.001-81.925-66.409-148.339-148.336-148.339l0 0z" fill="currentColor"></path></svg>
                    </div>
                </div>
            </div>
            {to_the_top_flag ? <div className='datils_to_the_top'>
                <svg className='to_the_top' viewBox="64 64 896 896" focusable="false" data-icon="vertical-align-top" width="30px" height="30px" fill="currentColor" aria-hidden="true"><path d="M859.9 168H164.1c-4.5 0-8.1 3.6-8.1 8v60c0 4.4 3.6 8 8.1 8h695.8c4.5 0 8.1-3.6 8.1-8v-60c0-4.4-3.6-8-8.1-8zM518.3 355a8 8 0 00-12.6 0l-112 141.7a7.98 7.98 0 006.3 12.9h73.9V848c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V509.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 355z"></path></svg>
            </div> : ""}
<<<<<<< HEAD
=======
<<<<<<< HEAD
>>>>>>> 20de51ee1926e77b985667bbcfd9b29f2f72b409
            <Bottom></Bottom>
            <div className='toup'>
                 <a href="#top">返回顶部</a>
            </div>
           
<<<<<<< HEAD
=======
=======
            {/* <Bottom></Bottom> */}
>>>>>>> wanghengda
>>>>>>> 20de51ee1926e77b985667bbcfd9b29f2f72b409
        </div>
    )
}

export default Datils


<<<<<<< HEAD
 // dangerouslySetInnerHTML={{ __html: obj.html }}
=======
<<<<<<< HEAD
 // dangerouslySetInnerHTML={{ __html: obj.html }}
=======
 // dangerouslySetInnerHTML={{ __html: obj.html }}
>>>>>>> wanghengda
>>>>>>> 20de51ee1926e77b985667bbcfd9b29f2f72b409
